<template>
<div class="preview-text">
	<div class="text">
		<p class="title">
			<slot name="title">
				<span>剪影流殇，光影华年</span>
			</slot>
		</p>
		<p class="content">
			<slot name="content">
				<span>染指流沙，回绕不尽的世界繁华； 青灯孤伴，镌刻不完的午夜落花； 锦帛残卷，撰写不到的城南旧事； 蓦然回首，消逝不见的绝美年华。</span>
			</slot>
		</p>
	</div>
</div>
</template>

<script>
	export default {
		name: "previewText"
	}
</script>

<style scoped>
	@media screen and (max-width: 992px) {
		.title {
			font-size: 1rem;
		}
		.content {
			line-height: 1rem;
		}
	}
	@media screen and (min-width: 993px) {
		.title {
			font-size: .23rem;
		}
		.content {
			line-height: .22rem;
		}
	}
	.title {
		padding-bottom: .1rem;
	}
	.content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: .15rem;
		letter-spacing: .03rem;
	}
</style>
